<template>
  <div class="hello">
    <h1 v-for="item in items" :key="item" :class="{underline:item.log}" @click="dosome(item)">{{ item.name }}</h1>
    <h2>Essintial Links</h2>
    <input type="text" v-model="itd.name"/>
    <input type="text" v-model="itd.age"/>
    <input type="text" v-model="itd.sex"/>
    <input type="text" v-model="itd.log" @keyup.enter="createtable"/>
    <!--<button type="button" @click="createtable()">create</button>-->
    <table>
      <thead>
          <tr>
            <th>name</th>
            <th>name</th>
            <th>name</th>
            <th>name</th>
            <th>name</th>
          </tr>
      </thead>
      <tbody>
      <tr v-for="(its , index ) in items" :key="its">
        <td>{{its.name}}</td>
        <td>{{its.age}}</td>
        <td>{{its.sex}}</td>
        <td>{{its.log}}</td>
        <td><button type="button" @click="remove(index)">删除</button></td>
      </tr>
      </tbody>
    </table>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      itd: {
        name: '李斯',
        age: '50',
        sex: '0',
        log: true
      },
      items: [
        {
          name: '张ytuuffufy8y三',
          age: '20',
          sex: '男',
          log: true
        }, {
          name: '1po-][ol-0[-515',
          age: '20',
          sex: '男',
          log: true
        }, {
          name: '46po[-0ipm[0=454',
          age: '20',
          sex: '男',
          log: true
        }
      ],
      dosome: function (item) {
        item.log = !item.log
      },
      createtable: function () {
        this.items.push(this.itd)
        this.itd = {name: '65', age: '554', sex: '545', log: false}
      },
      remove: function (index) {
        this.items.splice(index, 1)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  cursor: pointer;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
  .underline{
    text-decoration: red line-through;
  }
</style>
